<!--
	开发者:宋成恩
	开发时间:2017-7-9
	修改时间:2017-7-9
	功能:个人用户修改简历中的教育背景,单独的表单组件 ../PersonResume.vue中调用
 -->
<template>
  <div id="resumeEducationForm">
    <el-form :model="educationInfo" :rules="educationInfoRules" ref="educationInfoForm" label-width="110px">
      <el-row>
        <el-col :span="7">
          <el-form-item label="学历：" prop="education">
            <el-select v-model="educationInfo.education" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in educationList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业类型：" prop="profession_type">
            <el-input v-model="educationInfo.profession_type" placeholder="大专及以上者必填" size="small"
                      style="width:100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="学校：" prop="school_info">
            <el-input v-model="educationInfo.school_info" size="small" style="width:100%"></el-input>
            <!-- <el-select v-model="educationInfo.school_info" filterable placeholder="请选择">
                                <el-option v-for="(item, index) in schoolList" :key="index" :label="item.school_name" :value="item.school_name"></el-option>
                          </el-select> -->
          </el-form-item>
          <el-form-item label="就读时间：" prop="attend_date" required>
            <el-date-picker v-model="educationInfo.attend_date" type="date" size="small" placeholder="选择就读时间"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="专业：" prop="profession">
            <el-input v-model="educationInfo.profession" placeholder="大专及以上者必填" size="small"
                      style="width:100%"></el-input>
          </el-form-item>
          <el-form-item label="毕业时间：" prop="graduation_date" required>
            <el-date-picker v-model="educationInfo.graduation_date" type="date" size="small" placeholder="选择毕业时间"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row v-if="educationId !== 'add'">
      <el-col :span="5" :offset="1">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">毕业证书正面照</div>
        <upload-image-card :config="uploadConfig" :parameter="positiveParameter"
                           :defaultImageUrl="educationInfo.diploma1_url"
                           @sendUploadImageResponse="getPositiveImageResponse"></upload-image-card>
      </el-col>
      <el-col :span="5">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">毕业证书反面照</div>
        <upload-image-card :config="uploadConfig" :parameter="negativeParameter"
                           :defaultImageUrl="educationInfo.diploma2_url"
                           @sendUploadImageResponse="getNegativeImageResponse"></upload-image-card>
      </el-col>
    </el-row>
    <div class="btn-box" :style="{'margin-top': '20px'}">
      <el-button type="info" size="large" @click="checkEducationInfoData">保存</el-button>
      <el-button type="info" size="large" @click="cancelEducationInfoEdit">取消</el-button>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../../assets/js/post.js'
  import { formatterTime } from '../../../assets/js/common.js'
  import { getStaticMapList } from '../../../assets/js/GlobeDefine.js'
  import UploadImageCard from '@/components/common/UploadImageCard'

  export default {
    name: '',
    props: ['resumeId', 'educationId'],
    data () {
      var checkProfession = (rule, value, callback) => {
        value = value.replace(/^\s+|\s+$/g, '')
        if (this.educationInfo.education <= 3 && value === '') {
          callback(new Error('学历在大专及以上者必填'))
        } else if (value.length > 40) {
          callback(new Error('最多填写40个汉子'))
        }
        else {
          callback()
        }
      }
      var checkDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('时间不能为空'))
        } else {
          callback()
        }
      }
      return {
        uploadConfig: {
          type: 'HM_RESUME_DIPLOMA_ADD',
          width: '150px',
          height: '200px',
          tip: '<i style="color:red">* </i>请上传JPG或PNG格式的照片'
        },
        //正面
        positiveParameter: {
          id: '',
          diploma_type: 0
        },
        //反面
        negativeParameter: {
          id: '',
          diploma_type: 1
        },
        educationInfo: {
          education: 0,
          school_info: '',
          profession: '',
          profession_type: '',
          attend_date: '',
          graduation_date: ''
        },
        educationInfoRules: {
          education: [
            {type: 'number', required: true, message: '请选择您的学历', trigger: 'blur'}
          ],
          school_info: [
            {required: true, message: '请填写您的学校', trigger: 'blur'},
            {min: 1, max: 40, message: '长度在 1 到 16 个字符', trigger: 'change'}
          ],
          profession: [
            {validator: checkProfession, trigger: 'change'},
            {validator: checkProfession, trigger: 'blur'}
          ],
          profession_type: [
            {validator: checkProfession, trigger: 'change'},
            {validator: checkProfession, trigger: 'blur'}
          ],
          attend_date: [
            {validator: checkDate, trigger: 'change'},
            {validator: checkDate, trigger: 'blur'}
          ],
          graduation_date: [
            {validator: checkDate, trigger: 'change'},
            {validator: checkDate, trigger: 'blur'}
          ]
        },
        //用于新增时给表单赋值
        educationInfoSpare: {
          education: 0,
          school_info: '',
          profession: '',
          profession_type: '',
          attend_date: '',
          graduation_date: ''
        },
        schoolList: [],
        pickerOptions: {
          disabledDate (time) {
            return Date.now() - 8.64e7 < time.getTime()
          }
        },
        educationList: getStaticMapList('education'),
      }
    },
    components: {UploadImageCard},
    created () {
      // this.getCombobox();
      if (this.educationId !== 'add') {
        this.positiveParameter.id = this.educationId
        this.negativeParameter.id = this.educationId
        this.getEducationInfo()
      } else {
        this.educationInfo = this.educationInfoSpare
      }
    },
    methods: {
      getCombobox () {
        let _this = this
        postDataToServer('SCHOOL_LISTALL').then((data) => {
          if (data.status === 0) {
            _this.schoolList = data.data_list
          }
        })
      },
      getEducationInfo () {
        let _this = this
        let parameter = new Object()
        parameter.id = this.educationId
        postDataToServer('HM_RESUME_EDUCATION_GET', parameter).then((data) => {
          if (data.status === 0) {
            this.educationInfo = data.data_list
          }
        })
      },
      //正面
      getPositiveImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功')
          this.educationInfo.diploma1_url = data.portrait_url
        } else {
          this.$message.error(data.message)
        }
      },
      //反面
      getNegativeImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功')
          this.educationInfo.diploma2_url = data.portrait_url
        } else {
          this.$message.error(data.message)
        }
      },
      checkEducationInfoData () {
        let _this = this
        this.$refs['educationInfoForm'].validate((valid) => {
          if (valid) {
            _this.saveEducationInfo()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })

          }
        })
      },
      saveEducationInfo () {
        let _this = this
        let path = 'HM_RESUME_EDUCATION_EDIT'
        if (this.educationId === 'add') {
          path = 'HM_RESUME_EDUCATION_ADD'
          this.educationInfo.resume_id = this.resumeId
        }
        this.educationInfo.attend_date = formatterTime('date', this.educationInfo.attend_date)
        this.educationInfo.graduation_date = formatterTime('date', this.educationInfo.graduation_date)
        postDataToServer(path, this.educationInfo).then((data) => {
          if (data.status === 0) {
            this.$emit('sendEditEducationStatus', 'success')
          } else {
            _this.$message.error(data.message)
          }
        })
      },
      cancelEducationInfoEdit () {
        this.$emit('sendEditEducationStatus', 'cancel')
      }
    }
  }
</script>

<style scoped>
  .btn-box {
    width: 90%;
    text-align: center;
  }
</style>
